<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <title>Document</title>
  <style>
    .top{
      width: 100%;
      height: 43px;
      background-color: #ddd;
      position: fixed;
      top: 0;
      z-index: 1;
    }
    .center{
      width: 90%;
      margin: auto;
      position: relative;
    }
    .top>div>div:nth-child(3){
      position: absolute;
      right: 0;
      top: 0;
      
    }
    .top>div>div{
      line-height: 43px;
      font-size: 14px;
    }
    
    a{
      color: black;
      text-decoration: none;
    }
    .top>div>div:nth-child(2){
      position: absolute;
      left: 47.5%;
      text-decoration: underline;
    }
    .zdy2 h2{
      margin: 10px 0;
      
    }
    .zdy2 ul{
      margin: 10px;
    }
    .zdy2 ul li{
      margin: 0 10px;
    }
    .zdy2 ul li:last-child{
      color: burlywood;
    }
    .bg-big{
      overflow: hidden;
    }
    .bg-big img{
      width: 100vw;
      height: 35vw;
      min-height: 400px;
      min-width: 600px;
      margin-top: 200px;
    }
    .bg-big .center>h2{
      transform: translateY(-20vh);
      color: white;
    }
    .bg-big .center .zdy-tit{
      text-align: center;
      margin: auto;
      transform: translateY(-15vh);
      
    }
    .bg-big .center .zdy-tit button{
      width: 100px;
      height: 40px;
    }
    .zdy-one button{
      width: 220px;
      border: 1px solid black;
    }
    .zdy-two img{
      width: 20vw;
      height: 25vw;
    }
    .zdy-two p{
      margin-top: 10px;
      font-size: 12px;
    }
    .zdy-four{
      width: 100%;
      transform: translateY(250px);
      margin-right: 0;
    }
      .zdy-four img{
        width: 30vw;
        height: 40vw;
      }
      .zdy-four img:hover{
        transform: scale(1.2) rotate(360deg);
        transition: 2s linear;
      }
      .foot button{
        color: gray;
      }
    @media(max-width:500px) {
      .top>div>div:nth-child(2){
        transform: translateX(-30%);
      }
      .zdy-ul1 li{
        display: block;
        flex-wrap: wrap;
      }
      .zdy-ul1{
        width: 100vw;
        height: 80vh;
      }
      .bg-big img{
      transform: translateX(-100px);
      }
      .bg-big .center .zdy-tit button{
      width: 50vw;
      height: 10vw;
      margin-bottom: 5px;
      }
      .bg-big .center>h2{
      transform: translateY(-40vh);
      font-size: 22px;
      font-weight: 600;
      }
      .bg-big .center .zdy-tit{
        transform: translateY(-40vh);
      }
      #zdy-font{
        transform: translateX(4vw);
      }
      .bg-big img{
       transform: translate(-100px,0);
      }
      .zdy-one img{
      display: block;
      width: 90vw;
      margin: auto;
      }
      .zdy-one div div>div:nth-child(1){
        margin-bottom: 30px;
      }
      .zdy-two img{
      width: 90vw;
      height: 90vw;
      margin-bottom: 20px;
      }
      .zdy-four img{
        width: 100vw;
        height: 80vw;
        transform: translateX(-10px);
      }
      
      .zdy-four h3{
        font-size: 25px;
      }
      .zdy-four img:hover{
        transform: scale(1.2) rotate(360deg);
        transition: 2s linear;
      }
      .foot{
        transform: translate(10px,300px);
      }
    }
    @media(min-width:500px){
      .zdy-one div div>div:nth-child(1){
        transform: translateY(180px);
      }
      .zdy-one img{
      width: 45vw;
      }
      .zdy-three div div>div:nth-child(2){
        transform: translate(50px,630px);
      }
      .zdy-three div div>div:nth-child(2)>div{
        transform: translateY(-4px);
      }
      .foot{
        transform: translateY(400px);
      }
    }
  </style>
</head>
<body>
  <div>
    <div class="top">
    <div class="center d-flex justify-content-between">
      <div class="d-flex">
        <div class="mr-3 d-none d-sm-block ml-2"><a href="" >中国 | 中文(CN￥)</a></div>
        <div class="mr-3"><a href="" >精品店</a></div>
        <div class="d-none d-sm-block"><a href="" >联系我们</a></div>
      </div>
      <div class=""><a href="" class="">选购促销系列</a></div>
      <div class="d-flex">
        <div class="mr-3 d-none d-sm-block"><a href="" >登录/注册</a></div>
        <div class="mr-3 d-none d-sm-block"><a href="" >❤</a></div>
        <div class="mr-2 " id="zdy-font"><a href="">✉ 购物袋</a></div>
      </div>
    </div>
    <div class="zdy1 bg-white pt-1">
      <div class="center zdy2">
        <nav class="navbar navbar-dark bg-light navbar-expand-lg">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon bg-secondary"></span>
          </button>
        </nav>
        <h2 class="text-center zdy-h1">V E R S A C E</h2>
        <div class="collapse d-lg-block" id="navbarToggleExternalContent">
          <div class="bg-light p-2">
            <ul class="list-unstyled d-flex w-100 justify-content-center zdy-ul1">
              <li>女士</li>
              <li>男士</li>
              <li>儿童</li>
              <li>VERSACE HOME 家居精品</li>
              <li>JEANS COUTURE</li>
              <li>ATELIER</li>
              <li>精选折扣</li>
              <li>WORLD OF VERSACE</li>
              <li>礼品系列</li>
            </ul>
          </div>
        </div>
        
        </div>
      </div>
    </div>
    <div class="bg-big">
      <img src="./ver_img/gifts-hero-holiday-011221-desk.jpg" alt="">
      <div class="center">
        <h2 class="text-center">送礼指南</h2>
        <div>
          <div class="zdy-tit">
            <button class="btn">女士礼品</button>
            <button class="btn">男士礼品</button>
            <button class="btn">家居礼品</button>
            <button class="btn">儿童礼品</button>
          </div>
        </div>
      </div>
    </div>
      <div class="zdy-one">
        <div class="center">
          <div class="row">
            <div class="col-12 col-sm-6">
              <h2>节日 GIFT FINDER</h2>
              <div>滑动手指，在 Gift Finder 游戏中挑选挚爱款式，我们将以此为您创建 Very Versace 个性符号以及<br>相匹配的精选礼品。</div>
              <button class="btn btn-white mt-4">开始游戏</button>
            </div>
            <div class="col-12 col-sm-6">
              <img src="./ver_img/gifts-hero-holiday-011121-desk.jpg" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="zdy-two">
        <h2 class="text-center mt-5">VERY VERSACE 节日系列</h2>
        <div class="center">
          <div class="row">
            <div class="col-12 col-sm-3">
              <img src="./ver_img/90_DG1I125-DJMX_KCVO_20_LaMedusaPendantNecklace-NecklacesandChains-versace-online-store_0_2.jpg" alt="">
              <p class="text-center">GRECAMANIA项链</p>
              <p class="text-center">CN￥4,600.00</p>
            </div>
            <div class="col-12 col-sm-3">
              <img src="./ver_img/90_DP85102-1A02240_6B12V_20_MedusaMusicPouch-Pouches-versace-online-store_0_1.jpg" alt="">
              <p class="text-center">LA MEDUSA 柳丁小号包装</p>
              <p class="text-center">CN￥8,500.00</p>
            </div>
            <div class="col-12 col-sm-3">
              <img src="./ver_img/90_DSU8094-1A01760_6K260_20_TrigrecaTrainers-TrigrecaSneakers-versace-online-store_0_2.jpg" alt="">
              <p class="text-center">ADGS MSA 时尚运动款鞋</p>
              <p class="text-center">CN￥1,500.00</p>
            </div>
            <div class="col-12 col-sm-3">
              <img src="./ver_img/90_ZACJ00008-ZCOSP052_Z4001_20_IBaroqueBathrobe-Bathrobes-versace-online-store_6_1.jpg" alt="">
              <p class="text-center">DAWDS MWA 纯净白时尚色彩衣服</p>
              <p class="text-center">CN￥2,500.00</p>
            </div>
          </div>
        </div>
      </div>
      <div class="zdy-one zdy-three">
        <div class="center">
          <div class="row">
            <div class="col-12 col-sm-6">
              <img src="./ver_img/gifts-holiday-011221-1-desk.jpg" alt="">
            </div>
            <div class="col-12 col-sm-6">
              <h2>耀眼挚礼</h2>
              <div>探索 Very Versace 时尚生活和家居挚礼。</div>
              <button class="btn btn-white mt-4">选择时尚生活挚礼</button>
            </div>
          </div>
        </div>
      </div>
      <div class="zdy-four">
        <div class="center">
          <div class="row">
            <div class="col-sm-4 col-12">
              <img src="./ver_img/gifts-holiday-011221-1-carousel.jpg" alt="">
              <h3 class="text-center">冬季配饰</h3>
            </div>
            <div class="col-sm-4 col-12">
              <img src="./ver_img/gifts-holiday-011121-3-carousel.jpg" alt="">
              <h3 class="text-center">DAWFA 运动鞋</h3>
            </div>
            <div class="col-sm-4 col-12">
              <img src="./ver_img/gifts-holiday-011121-2-carousel (1).jpg" alt="">
              <h3 class="text-center">RWVGA 珠宝</h3>
            </div>
          </div>
        </div>
      </div>
      <div class="foot">
        <div id="accordion">
          <div class="card">
            <div class="card-header" id="headingOne">
              <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  店铺分布
                </button>
              </h5>
            </div>
        
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
              <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingTwo">
              <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  客户服务
                </button>
              </h5>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
              <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingThree">
              <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  关于我们
                </button>
              </h5>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
              <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingfour">
              <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapsefour" aria-expanded="true" aria-controls="collapsefour">
                  细则及条款
                </button>
              </h5>
            </div>
        
            <div id="collapsefour" class="collapse show" aria-labelledby="headingfour" data-parent="#accordion">
              <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
  </div>
  
</body>

</html>